<template>
  <el-main class="page">
    <el-tabs v-model="activeName"
             @tab-click="handleClick">
      <el-tab-pane label="官网"
                   name="tab1">
        <el-row>
          <el-col :span="24">
            <div class="article-wrap">
              <p>官网地址</p>
               <el-link type="primary" target="blank" href="https://vue3js.cn/docs/zh/">具体详见</el-link>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="新特性"
                   name="tab2">
        <el-collapse v-model="activeCollapse">
          <el-collapse-item title="组合式api" name="1">
            <tab1></tab1>
          </el-collapse-item>
          <el-collapse-item title="teleport" name="2">
            <p>Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件</p>
            <p>上述只是简单描述下</p>
            <el-link type="primary" target="blank" href="https://vue3js.cn/docs/zh/guide/teleport.html#%E4%B8%8E-vue-components-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8">具体详见</el-link>
          </el-collapse-item>
          <el-collapse-item title="片段" name="3">
            <p>我们知道在vue2.0下，组件template标签下不能同时出现多个根组件，每次出现多个跟组件就会报错。
              因此，我们常常在template下增加一个div把所有内容包围住，但是3.0开始可以支持多个根组件了。
            </p>
          </el-collapse-item>
          <el-collapse-item title="触发组件选项" name="4">
            <p>零碎知识点，请查看原文</p>
            <el-link type="primary" target="blank" href="https://vue3js.cn/docs/zh/guide/component-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D">具体详见</el-link>
          </el-collapse-item>
          <el-collapse-item title="触发组件选项" name="4">
            <p>底下链接是从vue2.0到3.0的具体变化</p>
            <el-link type="primary" target="blank" href="https://vue3js.cn/docs/zh/guide/migration/introduction.html#%E6%A6%82%E8%A7%88">具体详见</el-link>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>
<script>
import tab1 from './components/tab1.vue'
export default {
  components: { tab1 },
  data () {
    return {
      activeName: 'tab1',
      activeCollapse: ['1']
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style>
.page{
  text-align: left;
}
.article-wrap{
  text-align: left;
}
</style>
